<!-- 生产数据趋势图 -->
<script lang="ts" setup>
import MyChart from '@/components/MyChart.vue'
import { ref, watch } from 'vue'
const props = defineProps(['data'])

const options = ref({
  grid: {
    top: 40,
    bottom: 10,
    left: 80
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#999'
      }
    }
  },
  xAxis: [
    {
      type: 'value',
      // position: 'top',
      axisPointer: {
        type: 'shadow'
      },
      axisLabel: {
        show: false,
        color: '#ebeef5',
        fontSize: 18
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#182758',
          width: 2
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#182758',
          width: 1
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      data: [],
      // nameTextStyle: {
      //   color: '#ebeef5',
      //   fontSize: 16,
      //   align: 'right',
      //   // padding: [0, 5, 8, 0]
      // },
      axisLabel: {
        show: false,
        formatter: '{value}',
        color: '#ebeef5',
        fontSize: 18,
        align: 'right'
        // interval: 0, rotate: 30
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#182758',
          width: 2
        }
      }
    }
  ],
  series: [
    //内部标签系列
    {
      name: '',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'insideLeft', // 外部标签
        color: '#fff',
        formatter: '{c}%',
        fontSize: 16
      },
      barWidth: 0,
      color: 'rgba(0,0,0,0)',
      data: []
    },
    //外部标签系列
    {
      name: '',
      type: 'bar',
      stack: 'total',
      label: {
        show: true,
        position: 'right', // 外部标签
        color: '#fff',
        formatter: '{c}',
        fontSize: 16
      },
      barWidth: 20,
      color: ['#129BFF', 'red', 'yellow'],
      tooltip: {
        valueFormatter: function (value: any) {
          return value + ''
        }
      },
      data: []
    },
    
  ]
})

const colors = ['#67C23A', '#E6A23C', '#F56C6C']
watch(
  () => props.data,
  (val) => {
    const { xList, yList, rationList } = val
    options.value.yAxis[0].data = xList
    options.value.series[1].data = yList.map((item: any, index: number)=>{
      return {
        value: item,
        itemStyle: {
          color: colors[index]
        }
      }
    })
    options.value.series[0].data = rationList
  },
  {
    deep: true, // 开启深度监听
    immediate: true // 立即触发一次（可选）
  }
)
</script>
<template>
  <MyChart width="300px" height="130px" :option="options" />
</template>
